<template>
  <view class="address-manage">
      <view style="position: sticky;z-index: 99;top: 0;background: #f1f1f1">
          <uni-search-bar placeholder="单位名称/地址名称" radius="100" bgColor="#fff" @confirm="search" v-model="keyWord"/>
      </view>
    <!-- 地址列表 -->
    <view v-for="(item, index) in addressList" :key="item.id" class="address-item">
      <view class="address-info">
        <view class="name">
			<view style="margin-right: 10px;">{{ item.clientName}}</view>
			<wd-tag type="primary" mark plain>{{ item.addrName }}</wd-tag>
		</view>
        <view class="address">
			<view class="iconfont icon-small gray">&#xe63f;</view>
			<view> {{ item.address }}</view>
		</view>
      </view>
      <view class="actions">
        <view class="edit-btn" @click="editAddress(item)">编辑</view>
      </view>
    </view>
  </view>
  <AddButton @click="editAddress(null)"/>
</template>

<script>

import request from '@/util/request';
import AddButton from '@/common/component/AddButton.vue';
export default {
	components: {
	    AddButton
	},
  data() {
    return {
      addressList: [],
      total: 0,
      pageNum: 1,
      pageSize: 10,
      keyWord: ""
    }
  },
  mounted() {
    this.load()
  },
    onPullDownRefresh() {
        this.pageNum=1;
        this.pageSize=10;
        this.load()
        uni.stopPullDownRefresh();
    },
    onReachBottom() { //触底事件
        if (this.pageNum * this.pageSize >= this.total) {
            uni.showToast({
                title: '没有更多数据了',
                icon: 'none',
                duration: 1000
            });
        } else {
            uni.showLoading({
                title: '加载中'
            });
            this.pageSize+=10
            this.load()
            setTimeout(() => {
                uni.hideLoading()
            }, 500)
        }
    },
  methods: {
      search(res) {
          this.load();
      },
	editAddress(item){
		if(item!==null){
			uni.navigateTo({
				url:"/pages/address/add?data="+JSON.stringify(item)
			})
		}else{
			uni.navigateTo({
				url:"/pages/address/add"
			})
		}
	},
    load() {
      let level = this.$store.state.userInfo.level;
      let organizationId = this.$store.state.userInfo.organization;
      let isAllClient = this.$store.state.userInfo.isAllClient;
      let clientIds;
      if (isAllClient === "1") {
        clientIds = this.$store.state.userInfo.clientIds;
      } else {
        clientIds = [];
      }

      request.get("/inspect-addr-code/page?pageNum=" + this.pageNum + "&pageSize=" + this.pageSize + "&keyWord=" + this.keyWord +
        "&level=" + level + "&organizationId=" + organizationId + "&isAllClient=" + isAllClient + "&clientIds=" + clientIds).then(res => {
        if (res.code === '200') {
          for (let key in res.data) {
            if (key === "record") {
              this.addressList = res.data[key];
            } else if (key === "total") {
              this.total = res.data[key];
            }
          }
          console.log(this.addressList)
        } else {
          this.$message.error("错误" + res.msg)
        }
      })
    },
  }
}
</script>

<style scoped>
.address-manage {
  padding: 0 10px 10px 10px;
}

.address-item {
  padding: 15px;
  margin-bottom: 10px;
  background-color: #fff;
  border-radius: 8px;
  border: 1px solid #f1f1f1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}

.address-info {
  margin-bottom: 10px;
}

.name {
	align-items: center;
	display: flex;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.address {
	display: flex;
  font-size: 14px;
  color: #777;
}

.actions {
  display: flex;
  justify-content: flex-end;
  margin-top: auto; /* 使按钮推到底部 */
  gap: 10px;
}

.edit-btn,
.delete-btn {
  font-size: 12px; /* 按钮缩小 */
  border-radius: 15px; /* 圆角 */
  padding: 2px 8px;
  background-color: #d3d3d3; /* 灰色背景 */
  color: #333; /* 黑色字体 */
  transition: background-color 0.3s ease; /* 添加过渡效果 */
  border: none; /* 去除边框 */
  outline: none; /* 去掉外轮廓 */
  box-shadow: none; /* 去掉阴影 */
}
</style>
